<template>
  <el-row id="system-manage-container">

    <el-row class="tittle-nav">
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        background-color="#17252f"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="handleSelect" >
        <el-menu-item index="1">角色管理</el-menu-item>
        <el-menu-item index="2">用户管理</el-menu-item>
        <el-menu-item index="3">操作日志</el-menu-item>
        <el-menu-item index="4">系统设置</el-menu-item>
      </el-menu>
    </el-row>


    <el-row v-show="roleManageShow">
      <role-manage></role-manage>
    </el-row>

    <el-row v-show="userManageShow">
      <user-manage></user-manage>
    </el-row>

    <el-row v-show="operateLogShow">
      <operate-log></operate-log>
    </el-row>

    <el-row v-show="systemSettingShow">
      <system-setting></system-setting>
    </el-row>

  </el-row>
</template>

<script>
  import UserManage from "../../../components/SystemManage/userManage";
  import RoleManage from "../../../components/SystemManage/roleManage";
  import OperateLog from "../../../components/SystemManage/operateLog";
  import SystemSetting from "../../../components/SystemManage/systemSetting";
  export default {
    name: "index",
    components: { SystemSetting, OperateLog, RoleManage, UserManage},
    data(){
      return {
        activeIndex: '1',
        userManageShow: false,
        roleManageShow: true,
        operateLogShow: false,
        systemSettingShow: false,
      }
    },
    created() {
      this.$emit('fixHeadIndex', "8")
    },
    methods: {
      handleSelect(key, keyPath){
        this.activeIndex = key
        switch (key) {
          case "1":{
            this.roleManageShow = true
            this.userManageShow = false
            this.operateLogShow = false
            this.systemSettingShow = false
            break
          }
          case "2":{
            this.roleManageShow = false
            this.userManageShow = true
            this.operateLogShow = false
            this.systemSettingShow = false
            break
          }
          case "3":{
            this.roleManageShow = false
            this.userManageShow = false
            this.operateLogShow = true
            this.systemSettingShow = false
            break
          }
          case "4":{
            this.roleManageShow = false
            this.userManageShow = false
            this.operateLogShow = false
            this.systemSettingShow = true
            break
          }
        }
      },

    }
  }
</script>

<style lang="scss">

  #system-manage-container {

    .tittle-nav{
      height: 50px;
      background-color: #17252f;
      display: -webkit-flex;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .el-menu {
      display: inline-block;
      font-size: 14px;
      line-height: 50px;
      margin-left: 8px;
    }

    .el-menu--horizontal > .el-menu-item {
      height: 50px!important;
      line-height: 50px!important;
      margin: 0;
      border-bottom: 0px solid transparent;
    }

    .el-menu.el-menu--horizontal {
      border-bottom: solid 0px #e6e6e6;
    }

    .el-menu--horizontal>.el-menu-item.is-active {
      border-bottom: 0px solid #303133;
      color: #303133;
    }

  }

</style>
